home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / tydhtml / dyn.exe / CHAP11 / dyn11_6.txt < prev    next >
Encoding:
Text File  |  1997-10-02  |  3.7 KB  |  102 lines
  1. <HTML>
  2.  
  3. <HEAD>
  4.  
  5. <TITLE>5 Species of Squid</TITLE>
  6.  
  7. </HEAD>
  8.  
  9. <BODY BACKGROUND="water.jpg" TEXT=#FFFFFF LINK=FFFF22 VLINK=FF22FF>
  10.  
  11. <H2>Species of Squid</H2>
  12.  
  13. <FONT COLOR=#FFFF00>
  14.  
  15. <I>Click on a squid to learn more about that type</I></FONT>
  16.  
  17. </P>
  18.  
  19. <P>
  20.  
  21. <OBJECT ID="squidlist"
  22.  
  23.         CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
  24.  
  25.         BORDER="0" WIDTH="0" HEIGHT="0">
  26.  
  27.   <PARAM NAME="DataURL" VALUE="types.txt">
  28.  
  29.   <PARAM NAME="UseHeader" VALUE="True">
  30.  
  31. </OBJECT>
  32.  
  33. <P>
  34.  
  35. <IMG ID="pointer" STYLE="container:positioned;position:absolute;TOP:400pt;
  36.  
  37. LEFT:0px;WIDTH:156px;HEIGHT:156px;ZINDEX:0;" src="hilite.gif">
  38.  
  39. <IMG ID="s1" STYLE="container:positioned;position:absolute;TOP:10pt;
  40.  
  41. LEFT:480px;WIDTH:128px;HEIGHT:96px;ZINDEX:1;" src="Squid1.gif">
  42.  
  43. <IMG ID="s2" STYLE="container:positioned;position:absolute;TOP:30pt;
  44.  
  45. LEFT:340px;WIDTH:128px;HEIGHT:64px;ZINDEX:6;" src="Squid5.gif">
  46.  
  47. <IMG ID="s3" STYLE="container:positioned;position:absolute;TOP:55pt;
  48.  
  49. LEFT:40px;WIDTH:128px;HEIGHT:64px;ZINDEX:4;" src="Squid4.gif">
  50.  
  51. <IMG ID="s4" STYLE="container:positioned;position:absolute;TOP:50pt;
  52.  
  53. LEFT:270px;WIDTH:64px;HEIGHT:96px;ZINDEX:3;" src="Squid3.gif">
  54.  
  55. <IMG ID="s5" STYLE="container:positioned;position:absolute;TOP:80pt;
  56.  
  57. LEFT:400px;WIDTH:128px;HEIGHT:64px;ZINDEX:2;" src="Squid2.gif">
  58.  
  59. <TABLE><TR><TD>
  60.  
  61. <TR>
  62.  
  63. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=type>Squid Type: </LABEL></TD>
  64.  
  65. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  66.  
  67. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=type SIZE=20 TYPE=text DATASRC=#squidlist 
  68.  
  69. DATAFLD="Type"></TD>
  70.  
  71. </TR>
  72.  
  73. <TR>
  74.  
  75. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=geography>Geography: </LABEL></TD>
  76.  
  77. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  78.  
  79. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=geography SIZE=60 TYPE=text 
  80.  
  81. DATASRC=#squidlist DATAFLD="Geography"></TD>
  82.  
  83. </TR>
  84.  
  85. <TR>
  86.  
  87. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=environment>Environment: </LABEL></TD>
  88.  
  89. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  90.  
  91. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=environment SIZE=200 TYPE=text 
  92.  
  93. DATASRC=#squidlist DATAFLD="Environment"></TD>
  94.  
  95. </TR>
  96.  
  97. <TR>
  98.  
  99. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=size>Size: </LABEL></TD>
  100.  
  101. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  102.  
  103. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=size SIZE=20 TYPE=text DATASRC=#squidlist 
  104.  
  105. DATAFLD="Size"></TD>
  106.  
  107. </TR>
  108.  
  109. <TR>
  110.  
  111. <TD ALIGN=RIGHT VALIGN=TOP><LABEL FOR=comments>Comments: </LABEL></TD>
  112.  
  113. <TD ALIGN=LEFT VALIGN=TOP WIDTH="10"></TD>
  114.  
  115. <TD ALIGN=LEFT VALIGN=TOP><INPUT ID=comments SIZE=200 TYPE=text 
  116.  
  117. DATASRC=#squidlist DATAFLD="Comments"></TD>
  118.  
  119. </TR>
  120.  
  121. </TABLE>
  122.  
  123. <SCRIPT language=JavaScript>
  124.  
  125. var srcElement
  126.  
  127. function documentClick() {
  128.  
  129.     srcElement = window.event.srcElement;
  130.  
  131.     if (srcElement.id=="s1") {
  132.  
  133.        squidlist.recordset.AbsolutePosition = 1;
  134.  
  135.        pointer.style.top="0px";
  136.  
  137.        pointer.style.left="440px";
  138.  
  139.     } else { 
  140.  
  141.        if (srcElement.id=="s2") {
  142.  
  143.           squidlist.recordset.AbsolutePosition = 2;
  144.  
  145.           pointer.style.top="0px";
  146.  
  147.           pointer.style.left="320px";
  148.  
  149.        } else {
  150.  
  151.           if (srcElement.id=="s3") {
  152.  
  153.              squidlist.recordset.AbsolutePosition = 3;
  154.  
  155.              pointer.style.top="35px";
  156.  
  157.              pointer.style.left="20px";
  158.  
  159.           } else {
  160.  
  161.              if (srcElement.id=="s4") {
  162.  
  163.                 squidlist.recordset.AbsolutePosition = 4;
  164.  
  165.                 pointer.style.top="30px";
  166.  
  167.                 pointer.style.left="200px";
  168.  
  169.              } else {
  170.  
  171.                 if (srcElement.id=="s5") {
  172.  
  173.                    squidlist.recordset.AbsolutePosition = 5;
  174.  
  175.                    pointer.style.top="60px";
  176.  
  177.                    pointer.style.left="360px";
  178.  
  179.                 }
  180.  
  181.              }
  182.  
  183.           }
  184.  
  185.        }
  186.  
  187.     }
  188.  
  189. }
  190.  
  191.  
  192.  
  193. document.onclick = documentClick;
  194.  
  195.  
  196.  
  197. </SCRIPT>
  198.  
  199. </BODY>
  200.  
  201. </HTML>
  202.  
  203.